import React, { Component } from 'react'
// 通过 react-redux 引入高阶组件
import { connect } from 'react-redux'

// UI组件 / 展示组件
// 展示数据即可，将业务交给容器组件处理
class List1 extends Component {
  render() {
    return (
      <div>
        List1
        <button onClick = { () => {
          this.props.changeList()
        }}>改变数据</button>
        {
          this.props.list.map((item, index) => (
            <div key = { index }>{ item }</div>
          ))
        }
      </div>
    )
  }
}
// 从状态管理器获取状态
const mapStateToProps = (state) => { // state 表示所有的状态
  return {
    list: state.list
  }
}

const mapDispatchToProps = (dispatch) => { // dispatch 可以触发reducer的改变
  return {
    changeList () { // 容器组件需要执行的业务逻辑
      dispatch({
        type: 'UPDATE_LIST',
        payload: [4, 5, 6]
      })
    }
  }
}

// 暴露出去的是容器组件 - 负责获取状态管理器中的数据，以及修改状态管理中的数据，通过props与UI组件交互
// 实际上 connect() 才是高阶组件
// export default connect()(List1)
export default connect(mapStateToProps, mapDispatchToProps)(List1)

// fn(1)(2)(3) 输出结果为6，实现fn函数   ----   函数柯里化
/**
 * 
 * function fn (a) {
 *    return function (b) {
 *      return function (c) {
 *        return a + b + c
 *      }
 *    }
 * }
 */